<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE中的数据代理</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        数据代理：
		1.目的：让程序员更加方便的读取到_data中属性；
		2.原理：Object.defineProperty；
		3.体现：vm身上有每一个属性的proxyGetter、proxySetter；
		4.当修改vm上的属性时，该属性对应的proxySetter就会调用，去修改_data中对应的属性；
		5.当读取vm上的属性时，该属性对应的proxyGetter就会调用，去读取_data中对应的属性；

        数据劫持（_data里的那点事）：
		1.目的：为了捕获到数据的改变，进而重新解析模板；
		2.原理：Object.defineProperty；
		3.体现：_data身上的每一个属性不直接给值，而是都有对应的：reactiveSetter、reactiveGetter；
		4.当修改_data上的属性时，该属性对应的reactiveSetter就会调用；
				且在reactiveSetter中Vue会：更新数据、重新解析模板；
		5.当读取_data上的属性时，该属性对应的reactiveGetter就会调用，返回对应的值
     -->
    <!-- 准备好一个容器-->
    <div id="demo">
        <h4>学校名称:{{name}}</h4>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#demo',
        data: {
            name: '尚硅谷',
        }
    })
    console.log(vm)
</script>

</html>